<template>
  <div class="app-container teacher-form-container">
    <el-tabs v-model="activeName">
      <el-tab-pane label="师资信息" name="basic">
        <el-form ref="form" :model="form" :rules="rules" label-width="100px" class="form-container">
          <div class="form-section">
            <div class="section-title">基本信息</div>
            <!-- 第一行 -->
            <el-row :gutter="24">
              <el-col :span="8">
                <el-form-item label="师资姓名" prop="name">
                  <el-input v-model="form.name" placeholder="请输入师资姓名" clearable style="width: 250px" :disabled="isDetailMode"/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="师资类型" prop="teacherType">
                  <el-select v-model="form.teacherType" placeholder="请选择师资类型" clearable style="width: 250px" :disabled="isDetailMode">
                    <el-option
                      v-for="dict in dict.type.teacher_type"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="联系方式" prop="phone">
                  <el-input v-model="form.phone" placeholder="请输入联系方式" clearable style="width: 250px" :disabled="isDetailMode" />
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 第二行 -->
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="职称" prop="professionalTitle">
                  <el-input v-model="form.professionalTitle" placeholder="请输入职称" clearable style="width: 250px" :disabled="isDetailMode"/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="专业名称" prop="majorName">
                  <el-input v-model="form.majorName" placeholder="请输入专业名称" clearable style="width: 250px" :disabled="isDetailMode"/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="签约时间" prop="signTime">
                  <el-date-picker
                    v-model="form.signTime"
                    type="datetime"
                    placeholder="选择签约时间"
                    style="width: 250px"
                    :disabled="isDetailMode"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 第三行 -->
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="到期时间" prop="expireTime">
                  <el-date-picker
                    v-model="form.expireTime"
                    type="datetime"
                    placeholder="选择到期时间"
                    style="width: 250px"
                    :disabled="isDetailMode"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="师资分类" prop="teacherClassification">
                  <el-select v-model="form.teacherClassification" placeholder="请选择师资分类" style="width: 250px" :disabled="isDetailMode">
                    <el-option label="外部" value="external"></el-option>
                    <el-option label="内部" value="internal"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 文本域区域 -->
            <el-row :gutter="24">
              <el-col :span="24">
                <el-form-item label="专业领域" prop="professionalField" style="padding-right: 50px;">
                  <el-input
                    type="textarea"
                    v-model="form.professionalField"
                    placeholder="请输入专业领域"
                    :rows="3"
                    :disabled="isDetailMode"
                    style="width: 880px"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="24">
                <el-form-item label="备注" prop="remark">
                  <el-input
                    type="textarea"
                    v-model="form.remark"
                    placeholder="请输入备注"
                    :rows="3"
                    :disabled="isDetailMode"
                    style="width: 880px"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <!-- 新增的富文本编辑字段 -->
          <el-form-item label="工作经历" prop="workExperience">
            <quill-editor
              class="ql-editor"
              v-model="form.workExperience"
              :options="editorOption"
              :disabled="isDetailMode"
              @blur="onEditorBlur($event)"
              @focus="onEditorFocus($event)"
              @change="onEditorChange($event)">
            </quill-editor>
          </el-form-item>

          <el-form-item label="主要特长" prop="speciality">
            <quill-editor
              class="ql-editor"
              v-model="form.speciality"
              :options="editorOption"
              :disabled="isDetailMode"
              @blur="onEditorBlur($event)"
              @focus="onEditorFocus($event)"
              @change="onEditorChange($event)">
            </quill-editor>
          </el-form-item>

          <el-form-item label="主讲课程" prop="course">
            <quill-editor
              class="ql-editor"
              v-model="form.course"
              :options="editorOption"
              :disabled="isDetailMode"
              @blur="onEditorBlur($event)"
              @focus="onEditorFocus($event)"
              @change="onEditorChange($event)">
            </quill-editor>
          </el-form-item>

          <el-form-item label="服务部分企业" prop="serviceEnterprises">
            <quill-editor
              class="ql-editor"
              v-model="form.serviceEnterprises"
              :options="editorOption"
              :disabled="isDetailMode"
              @blur="onEditorBlur($event)"
              @focus="onEditorFocus($event)"
              @change="onEditorChange($event)">
            </quill-editor>
          </el-form-item>

          <el-form-item label="取得资质或荣誉" prop="qualification">
            <quill-editor
              class="ql-editor"
              v-model="form.qualification"
              :options="editorOption"
              :disabled="isDetailMode"
              @blur="onEditorBlur($event)"
              @focus="onEditorFocus($event)"
              @change="onEditorChange($event)">
            </quill-editor>
          </el-form-item>
          <el-form-item label="照片" prop="teacherFile" style="width: 100%" >
            <file-view  v-if="showFile"  :limit="1" :type="typeSelect" :businessId="form.uploadFile" :businessCode="businessCode"  ></file-view>
          </el-form-item>
        </el-form>
        <!-- 底部按钮 -->
        <div class="fixed-footer">
          <div style="text-align: center">
            <el-button type="primary" @click="submitForm" v-if="!isDetailMode">确 定</el-button>
            <el-button @click="cancel">返 回</el-button>
          </div>
        </div>
      </el-tab-pane>
      <!-- 这里可以添加更多的tab页 -->
<el-tab-pane label="产品信息" name="product" :disabled="typeSelect===0">
  <Qualification
    ref="product"
    @change="loadList"
    :isOpen="isOpen"
    :orgId="orgId"
    :bId="teacherId"
    :opt="opt"
  >
  </Qualification>
  <div class="fixed-footer">
    <div style="text-align: center">
      <el-button @click="cancel" style="text-align: center">返 回</el-button>
    </div>
  </div>
      </el-tab-pane>
<!--      进展记录-->
      <el-tab-pane label="跟进记录" name="four" :disabled="typeSelect===0">
        <div style="text-align: center">
          <SupplierRecords
            :bId="teacherId"
            :enterpriseId="teacherId"
            :enterpriseName="form.name"
            :contacts="form.name"
            :telephone="form.phone"
            :opt="opt"
          ></SupplierRecords>
        </div>
        <div class="fixed-footer">
          <div style="text-align: center">
            <el-button @click="cancel" style="text-align: center">返 回</el-button>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="荣誉资质信息" name="second" :disabled="typeSelect===0">
        <teacher    ref="honor"
                    :bId="teacherId"
                    :enterpriseId="teacherId"
                    :enterpriseName="form.name"
                    :opt="opt">
        </teacher>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { addTeacherInfo, updateTeacherInfo } from "@/api/teacher/infoNew";
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
import FileView from "@/components/FileView/index"
import Qualification from "../../../supplier/qualification.vue";
import SupplierRecords from "../../../supplier/records.vue";
import teacher from  "../teacher.vue"
export default {
  name: "TeacherForm",
  dicts: ['teacher_type'],
  components: {
    SupplierRecords,
    Qualification,
    quillEditor,FileView,teacher
  },
  props: {
    teacherInfo: {
      type: Object,
      default: null
    },
    type: {
      type: Number,
      default: 0
    },
    typeSelect:{
      type: Number,
      default: 0
    },
    show:{
      type: Boolean,
      default: false
    },
    opt: {
      type: String,
      default: "",
    },
  },
  computed: {
    isDetailMode() {
      return this.typeSelect === 2;
    },
    // 修改富文本编辑器配置，在详情模式下禁用工具栏
    editorOption() {
      const baseOptions = {
        modules: {
          toolbar: this.isDetailMode ? false : [
            // ... 原有的工具栏配置 ...
            ['bold', 'italic', 'underline', 'strike'],    //加粗，斜体，下划线，删除线
            ['blockquote', 'code-block'],     //引用，代码块
            [{ 'header': 1 }, { 'header': 2 }],        // 标题
            [{ 'list': 'ordered'}, { 'list': 'bullet' }],     //列表
            [{ 'script': 'sub'}, { 'script': 'super' }],   // 上下标
            [{ 'indent': '-1'}, { 'indent': '+1' }],     // 缩进
            [{ 'direction': 'rtl' }],             // 文本方向
            [{ 'size': ['small', false, 'large', 'huge'] }], // 字体大小
            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],     //几级标题
            [{ 'color': [] }, { 'background': [] }],     // 字体颜色，字体背景颜色
            [{ 'font': [] }],     //字体
            [{ 'align': [] }],    //对齐方式
            ['clean'],    //清除字体样式
          ]
        },
        readOnly: this.isDetailMode // 添加只读属性
      };
      return baseOptions;
    }
  },
  data() {
    return {
      activeName: 'basic', // 当前激活的标签页
      // 表单参数
      form: {
        workExperience: '', // 工作经历
        speciality: '', // 主要特长
        course: '', // 主讲课程
        serviceEnterprises: '', // 服务部分企业
        qualification: '', // 取得资质或荣誉
        teacherClassification:null, // 师资分类
      },
      typeSelect:0,
      businessCode:'teacherInfo',
      showFile:false,
      isOpen: true,
      zValue: 0,
      orgId: 0,
      teacherId: null,
      // 表单校验
      rules: {
        name: [
          { required: true, message: "师资姓名不能为空", trigger: "blur" },
          { min: 2, max: 50, message: '师资姓名长度必须介于 2 和 50 之间', trigger: 'blur' }
        ],
        teacherType: [
          { required: true, message: "师资类型不能为空", trigger: "change" }
        ],
        phone: [
          { required: true, message: "联系方式不能为空", trigger: "blur" },
          { pattern: /^1[3-9]\d{9}$/, message: "请输入正确的手机号码", trigger: "blur" }
        ]
      },

    };
  },
  watch: {
    teacherInfo: {
      handler(val) {
        if (val) {
          this.form = { ...val };
        }
      },
      immediate: true
    }
  },
  created() {
    this.form=this.teacherInfo;
    this.teacherId=this.teacherInfo.id;
    this.showFile=this.show;
    console.log(this.form)
    console.log(this.typeSelect)
    console.log(this.form.uploadFile)

  },
  methods: {
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id) {
            updateTeacherInfo(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.showFile=false;
              this.$emit('refresh');
              this.cancel();
            });
          } else {
            addTeacherInfo(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.showFile=false;
              this.$emit('refresh');
              this.cancel();
            });
          }
        }
      });
    },
    loadList() {
      this.$emit("change", this.zValue);
    },
    cancel() {
      this.$emit('update:type', 0);
    },
    // 富文本编辑器事件处理方法
    onEditorBlur(e) {
      console.log('editor blur:', e);
    },
    onEditorFocus(e) {
      console.log('editor focus:', e);
    },
    onEditorChange(e) {
      console.log('editor change:', e);
    },
  }
};
</script>

<style scoped lang="scss">
.teacher-form-container {
  overflow-y: auto;
  overflow-x: auto;
  padding: 16px;
  max-width: 100%;
  max-height: 90vh;
  box-sizing: border-box;
}

/* 添加只读模式的样式 */
.el-input.is-disabled .el-input__inner,
.el-textarea.is-disabled .el-textarea__inner {
  background-color: #f5f7fa;
  border-color: #e4e7ed;
  color: #606266;
  cursor: not-allowed;
}

/* 富文本编辑器只读模式样式 */
.ql-editor.ql-disabled {
  background-color: #f5f7fa;
}
.app-container {
  padding: 20px;
  background-color: #fff;
}

.form-container {
  padding: 20px;
}

.form-section {
  padding: 0 20px;
}

.section-title {
  font-size: 16px;
  color: #303133;
  font-weight: bold;
  margin-bottom: 30px;
  padding-left: 10px;
  border-left: 3px solid #409EFF;
}

.fixed-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  padding: 15px;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.08);
  z-index: 100;
}

.el-tabs {
  margin-bottom: 70px;
}

/* 调整表单项间距 */
.el-form-item {
  margin-bottom: 22px;
}

/* 统一所有表单项的标签宽度和对齐方式 */
.el-form-item__label {
  text-align: right !important;
  width: 100px !important;
}

/* 移除之前的特殊margin-left设置 */
.el-form-item__content {
  margin-left: 100px !important; /* 与label宽度保持一致 */
}

/* 文本域的特殊宽度设置 */
.el-form-item .el-textarea {
  width: 880px !important;
}

/* 保持其他输入框的宽度 */
.el-form-item .el-input,
.el-form-item .el-select,
.el-form-item .el-date-picker {
  width: 250px !important;
}

/* 行间距 */
.el-row {
  margin-bottom: 15px;
}

/* 最后一行不需要底部间距 */
.el-row:last-child {
  margin-bottom: 0;
}

/* 调整富文本编辑器的整体大小 */
.ql-editor {
  min-height: 100px !important; /* 减小最小高度 */
  max-height: 120px !important; /* 限制最大高度 */
  margin-bottom: 8px;
}

// /* 调整富文本编辑器容器的样式 */
// .el-form-item /deep/ .ql-container {
//   height: 60px !important; /* 减小容器高度 */
// }

// /* 调整工具栏的样式使其更紧凑 */
// .el-form-item /deep/ .ql-toolbar {
//   padding: 2px 4px !important; /* 减小工具栏内边距 */
// }

/* 调整富文本编辑器的宽度 */
.quill-editor {
  width: 95% !important; /* 稍微减小宽度 */
}

/* 调整富文本编辑器表单项的间距 */
.el-form-item {
  margin-bottom: 10px !important; /* 减小表单项之间的间距 */
}

// /* 调整工具栏按钮的大小 */
// .el-form-item /deep/ .ql-toolbar button {
//   padding: 2px 4px !important;
//   height: 22px !important;
// }

// /* 调整编辑器内容区域的内边距 */
// .el-form-item /deep/ .ql-editor {
//   padding: 6px 8px !important;
// }
</style>
